<template>
    <el-container>
        <el-header>
            <div class="total">
                <div class="s1">租房管理系统</div>
                <div class="s2"><el-button type="text" style="color: white" @click="logout">退出登录</el-button></div>
                <div class="blue-bar"></div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="activeIndex" class="menu" background-color="#293C50" text-color="#FFFFFF"
                    active-text-color="#ffd04b" @select="handleSelect">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>个人中心</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">修改密码</el-menu-item>
                            <el-menu-item index="1-2">个人信息</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-setting"></i>
                        <span slot="title">用户信息</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-goods"></i>
                        <span slot="title">房源信息</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-goods"></i>
                        <span slot="title">预约申请</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-bell"></i>
                        <span slot="title">用户反馈</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <div><el-button type="danger" style="margin-top:20px;margin-bottom:10px"
                        @click="DeleteByIds">批量删除</el-button></div>
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange" stripe border>
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="编号">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别">
                        <template slot-scope="scope">{{ scope.row.sex == 1 ? '男' : '女' }}</template>
                    </el-table-column>
                    <el-table-column prop="username" label="账号">
                    </el-table-column>
                    <el-table-column prop="password" label="密码">
                    </el-table-column>
                    <el-table-column prop="phone" label="电话号码">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间">
                    </el-table-column>
                    <el-table-column prop="operate" label="操作" width="200px">
                        <template slot-scope="scope">
                            <el-button type="warning" @click="handleEdit(scope.row)">修改</el-button>
                            <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align:center;margin-top:20px;">
                    <el-pagination background layout="total,sizes,prev,pager,next,jumper" :current-page="currentPage"
                        :page-sizes="pageSizes" :page-size="pageSize" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :total="userCount">
                    </el-pagination>
                </div>
                <el-dialog title="修改信息" :visible.sync="dialogVisible">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="ruleForm.name" style="width:350px"></el-input>
                        </el-form-item>
                        <el-form-item label="账号" prop="username">
                            <el-input v-model="ruleForm.username" style="width:350px"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="ruleForm.password" style="width:350px"></el-input>
                        </el-form-item>
                        <el-form-item label="电话号码" prop="phone">
                            <el-input v-model="ruleForm.phone" style="width:350px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleForm)">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import axios from 'axios';
axios.defaults.baseURL = '/api'
const token = sessionStorage.getItem('adminToken');
export default {
    data() {
        return {
            activeIndex: '2',
            tableData: [],
            multipleSelection: [],
            currentPage: 1, // 当前页码  
            pageSize: 5,   // 每页显示条数  
            pageSizes: [5, 10, 15, 20], // 允许选择每页显示的条目数 
            userCount: 0, // 初始化总数据条数为 0
            selectedIds: [],
            ruleForm: {
                name: '',
                username: '',
                password: '',
                phone: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { type: 'string', pattern: /^1\d{10}$/, message: '请输入有效的手机号码', trigger: 'blur' },
                ],
            },
            dialogVisible: false,
        }
    },
    methods: {
        logout() {
            this.$router.push({ name: "login" });
        },
        handleSelect(key) {
            switch (key) {
                case '1':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "adminHome" });
                    break;
                case '2':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "userAccount" });
                    break;
                case '3':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "houseInfo" });
                    break;
                case '4':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "userAppointment" });
                    break;
                case '5':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "userMess" });
                    break;
            }
        },
        handleSelectionChange(val) {
            this.selectedIds = [];
            val.forEach(item => {
                // @ts-ignore
                this.selectedIds.push(item.id);
            });
        },
        handleSizeChange: function (val) {
            this.pageSize = val;
            axios.get("/admin/user/getUserInfo", {
                headers: {
                    'Authorization': `Bearer ${token}`
                },
                params: {
                    page: this.currentPage,
                    pageSize: this.pageSize,
                }
            }).then(result => {
                this.tableData = result.data.rows;
                this.userCount = result.data.total;
            })
        },
        handleCurrentChange: function (val) {
            this.currentPage = val;
            axios.get("/admin/user/getUserInfo", {
                headers: {
                    'Authorization': `Bearer ${token}`
                },
                params: {
                    page: this.currentPage,
                    pageSize: this.pageSize,
                }
            }).then(result => {
                this.tableData = result.data.rows;
                this.userCount = result.data.total;
            })
        },
        handleEdit(val) {
            this.ruleForm.id = val.id;
            this.ruleForm.name = val.name;
            this.ruleForm.username = val.username;
            this.ruleForm.password = val.password;
            this.ruleForm.phone = val.phone;
            this.dialogVisible = true;
        },
        submitForm(ruleForm) {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    axios.post(`/admin/user/update`, ruleForm, {
                        headers: {
                            'Authorization': `Bearer ${token}`
                        },
                    }).then(result => {

                        axios.get('/admin/user/getUserInfo?page=1&pageSize=5', {
                            headers: {
                                'Authorization': `Bearer ${token}`
                            },
                        }).then(result => {
                            this.tableData = result.data.rows;
                            this.userCount = result.data.total;
                        })
                        this.$message({
                            message: "修改成功",
                            type: "success"
                        })
                        this.dialogVisible = false;
                    })
                } else {
                    this.$message({
                        message: "请填写正确信息",
                        type: "error"
                    })
                    return false;
                }
            });
        },
        handleDelete(id) {
            this.selectedIds.push(id);
            axios.delete(`/admin/user/ids?ids=${this.selectedIds}`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                },
            }).then(result => {
                axios.get('/admin/user/getUserInfo?page=1&pageSize=5', {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                }).then(result => {
                    this.selectedIds = [];
                    this.tableData = result.data.rows;
                    this.userCount = result.data.total;
                })
            })
        },
        DeleteByIds() {
            axios.delete(`/admin/user/ids?ids=${this.selectedIds}`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                },
            }).then(result => {
                axios.get('/admin/user/getUserInfo?page=1&pageSize=5', {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                }).then(result => {
                    this.selectedIds = [];
                    this.tableData = result.data.rows;
                    this.userCount = result.data.total;
                })
            }).catch(error => {
                this.$message({
                    message: "请选择删除的编号",
                    type: "error",
                })
            })
        }

    },
    mounted() {
        axios.get('/admin/user/getUserInfo?page=1&pageSize=5', {
            headers: {
                'Authorization': `Bearer ${token}`
            },
        }).then(result => {
            this.tableData = result.data.rows;
            this.userCount = result.data.total;
        })
    }
}
</script>

<style scoped>
.el-header {
    position: relative;
    width: 100%;
    height: 60px;
    background-color: rgb(41, 60, 80);
    color: #FFFFFF;
    text-align: center;
    line-height: 60px;
    position: relative;
}

.el-aside {
    display: block;
    position: absolute;
    left: 0;
    top: 60px;
    bottom: 0;
}

.el-main {
    position: absolute;
    left: 200px;
    right: 0;
    top: 60px;
    bottom: 0;
    overflow-y: scroll;
}

.menu {
    height: 100%;
    padding: 0;
}

.s1 {
    float: left;
}

.s2 {
    float: right;
}

.blue-bar {
    height: 10px;
    background-color: rgb(0, 135, 244);
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}



/*带背景的分页按钮背景色begin*/
.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #08C0B9;
    color: #FFF;
}

.el-pagination.is-background .el-pager li.active {
    color: #fff;
    cursor: default;
}

.el-pagination.is-background .el-pager li:hover {
    color: #08C0B9;
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #08C0B9;
}

.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    background-color: #08C0B9;
    color: #FFF;
}

/*带背景的分页按钮背景色end*/
</style>